<template>
  <div>
    <el-dialog
      title="新增推荐门店"
      :visible.sync="showAdd"
      width="30%"
      center
      :before-close="closePop2"
    >
      <el-form ref="form" :model="form">
        <div class="pop-content">
          <div class="pop-top">
            <div class="title">商户：</div>
            <div class="input">
              <el-input size="small" placeholder="请输入商户简称/手机号" maxlength="50" v-model="form.query" />
            </div>
            <el-button size="small" type="primary" @click="search()"
              >搜索</el-button
            >
          </div>
          <div class="shop-list">
            <div
              :class="['one', activeShop == item.id ? 'active' : '']"
              v-for="(item, index) in shopList"
              :key="index"
              @click="changeShop(item.id)"
            >
              <div class="title">{{ item.name }}</div>
              <div class="phone">商户手机号：{{ item.mobilePhone }}</div>
            </div>
          </div>
          <div class="child-list">
            <div class="title"><span>*</span>推荐门店:</div>
            <div class="list">
              <el-radio-group v-model="childRadio" class="radios">
                <el-radio
                  :class="[item.status == 1 ? 'no-select' : '']"
                  :label="item.id"
                  v-for="(item, index) in childShopList"
                  :key="index"
                  :disabled="item.status == 1"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <div class="pop-top sort">
            <div class="title"><span>*</span>排序：</div>
            <div class="input">
              <el-input
                size="small"
                class="app-input-no-num"
                v-model="form.sort"
                min="1"
                maxlength="5"
                @input="form.sort = form.sort.replace(/[^1-9]/g, '')"
              />
              <span>排序顺序从数字最小显示最前;</span>
            </div>
          </div>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closePop()">取 消</el-button>
        <el-button type="primary" @click="addShop()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addConfigShop, searchBusiness } from "@/publicApi/publicDomain";
import { mapState } from "vuex";

export default {
  props: ["value"],
  data() {
    return {
      showAdd: false,
      activeShop: "",
      childRadio: "",
      shopList: [],
      childShopList: [],
      form: {
        query: "",
        sort: "",
      },
    };
  },
  computed: {
    ...mapState({
      businessId: (state) => state.user.info.business.id,
    }),
  },
  mounted() {},
  methods: {
    openPop() {
      this.showAdd = true;
    },
    search() {
      this.closePop(1)
      let { query } = this.form;
      searchBusiness({ data: query }).then((res) => {
        if (res.code == 0) {
          this.shopList = res.data;
        }
      });
    },
    changeShop(id) {
      if (this.activeShop == id) return;
      this.childShopList =
        this.shopList.find((item) => {
          return item.id == id;
        })?.shopVoList || [];
      this.childRadio =
        this.childShopList.find((item, index) => {
          return item.status == 0;
        })?.id || "";
      this.activeShop = id;
    },
    closePop(type) {
      this.form.sort = ''
      this.activeShop = "";
      this.childRadio = "";
      this.childShopList = [];
      if(!type){
      this.form.query = ''
      this.shopList = [];
      this.showAdd = false;
      }
    },
     closePop2(done) {
      this.form.sort = ''
      this.activeShop = "";
      this.childRadio = "";
      this.childShopList = [];
      this.closePop()
      done()
    },
    addShop() {
      let {
        form: { sort: sortId },
        activeShop:businessId,
        childRadio: shopId,
      } = this;
      if (!shopId) {
        this.$message.error("请选择推荐门店后再提交！");
        return;
      }
      if (!sortId) {
        this.$message.error("请输入排序后再提交！");
        return;
      }
      let params = {
        businessId,
        shopId,
        sortId,
      };
      addConfigShop(params).then((res) => {
        if (res.code === 0) {
          this.$message.success("新增推荐门店成功");
          this.closePop();
          this.$emit('addMethods')
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog .el-dialog__body {
  padding: 0 !important;
}
/deep/.no-select .el-radio__inner {
  border-color: #ffb72f60 !important;
  background: #ffb72f60 !important;
  &:after {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #ffffff;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: -webkit-transform 0.15s ease-in;
    transition: -webkit-transform 0.15s ease-in;
    transition: transform 0.15s ease-in;
    transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in;
    transform: translate(-50%, -50%) scale(1);
  }
}
.pop-content {
  margin-bottom: 50px;
  .title {
    font-weight: bold;
    min-width: 80px;
    display: flex;
    align-items: center;
    position: relative;
    span {
      color: red;
      margin-right: 3px;
    }
  }
  .pop-top {
    display: flex;
    .input {
      flex: 1;
    }
    .el-button {
      margin-left: 15px;
    }
  }
  .shop-list {
    max-height: 200px;
    overflow-y: scroll;
    margin-top: 20px;
    padding-left: 80px;
    // &::-webkit-scrollbar {
    //   display: none;
    // }
    :last-child {
      margin-bottom: 0px !important;
    }
    .one {
      margin-bottom: 10px;
      border: 1px solid #efefef;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      .title {
        margin-bottom: 15px;
      }
    }
    .active {
      background-color: #ffb846;
    }
  }
  .child-list {
    display: flex;
    margin-top: 30px;
    margin-bottom: 15px;

    .title {
      align-items: flex-start !important;
    }
    .list {
      max-height: 100px;
      overflow-y: scroll;
      flex: 1;
      // &::-webkit-scrollbar {
      //   display: none;
      // }
      .el-radio-group {
        display: block !important;
        .el-radio {
          display: block !important;
          margin-bottom: 10px;
        }
      }
    }
  }
  .sort {
    .input {
      position: relative;
      span {
        position: absolute;
        font-size: 14px;
        left: 0;
        top: calc(100% + 10px);
      }
    }
  }
}
</style>